<template>
	<el-dialog
    v-model="dialogVisible"
    width="60%"
				style="background-color: rgba(8, 64, 132, 0.9);"
				:before-close="handleClose"
  >
		<div class="pie_box" ref="echartDom"></div>
 </el-dialog>
</template>

<script setup lang="ts">
import { inject, ref, shallowRef, onMounted, onUnmounted, watch,toRaw,watchEffect,defineEmits,defineProps } from "vue";
const dialogVisible = ref(false)
// 接收参数
const props = defineProps({
housingSupplyStatsData: {
	type: Object,
	default: () => {},
},
});
// 数据定义
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const emit = defineEmits(['closePieDialog'])
// 字体自适应方法
const pxToRem = (px: number) => {
	const scale = document.documentElement.clientWidth / 1920;
	return Math.round(px * Math.min(scale, 3));
};
// echarts初始化渲染
let legendStyle = props.housingSupplyStatsData.legendStyle//图例
let gridStyle = props.housingSupplyStatsData.gridStyle//网格
let seriesData = props.housingSupplyStatsData.seriesData//serires数据
let seriesStyle = props.housingSupplyStatsData.seriesStyle//serires配置


const getEchart = () => {
	dialogVisible.value = true;
	if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value); 
      // 图例配置
      const legendConfig = {
        show: legendStyle.show,
        icon: legendStyle.icon,
        left: pxToRem(legendStyle.left)? pxToRem(legendStyle.left):legendStyle.left,
        right:pxToRem(legendStyle.right),
        top: typeof legendStyle.top == "number" ? pxToRem(legendStyle.top) :legendStyle.top,
        bottom: pxToRem(legendStyle.bottom),
        itemWidth: pxToRem(legendStyle.itemWidth) * 2,
        itemHeight: pxToRem(legendStyle.itemHeight) * 2,
        itemGap: pxToRem(legendStyle.itemGap) * 2,
        textStyle: {
          color: "#fff",
          fontSize: pxToRem(20),
          rich:{
            one:{
              width:pxToRem(100),
            },
            two:{
              width:pxToRem(50),
            },
            three:{
              width:pxToRem(50),
            }
          },
          padding: [0, 0, pxToRem(-3), 0],
        },
      };
       // 追加项
       for(let j in legendStyle){
        if(j != 'show' && j != 'icon'  && j != 'left'  && j != 'right' && j != 'top' && j != 'itemWidth'  && j != 'itemHeight'   && j != 'itemGap'  && j != ' textStyle'){
          legendConfig[j] = toRaw(legendStyle[j])
        }
      }
      // series配置
     let seriesConfig = seriesData.map((item,index) => {
          return{
            name:'',
            type:'pie',
            center:toRaw(seriesStyle.center),
            radius:[pxToRem(toRaw(seriesStyle.radius)[0] * 4),pxToRem(toRaw(seriesStyle.radius)[1] * 4)],
            itemStyle: {
              borderRadius: pxToRem(2),
              backgroundColor:'red'
            },
            data:toRaw(seriesData[index]).map((item,index) => {
              return{
                name:item.name,
                value:item.value1,
                value1:item.value2,
              }
            })
          }
      })
      // 追加项
      for(let i in seriesStyle){
        if(i != 'radius' && i != 'center'  && i != ' type'  && i != ' seriesData'){
          seriesConfig[0][i] = toRaw(seriesStyle[i])
        }
      }
      //绘图
      const option = {
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            return (
                `${params.name}面积：` + `${params.value}万㎡<br/>占比：${params.percent}%</br> `+tempDom(params)
            )
          },
          axisPointer: {
            type: "line",
            lineStyle: {
              color: "rgba(40,252,255,0.6)",
              shadowBlur: 10,
              shadowColor: "rgba(0, 0, 0, 0.9)",
            },
          },
          position: function (point, params, dom, rect, size) {
            return [point[0], '5%']; // 示例：将 tooltip 定位在鼠标的水平位置和视窗顶部 10% 的位置
          },
          textStyle: {
            color: "#fff",
            fontSize: pxToRem(14),
          },
          backgroundColor: "rgba(47, 99, 205, 0.5)",
          borderColor: '#66FFFF', // 设置边框颜色为红色
          borderWidth: 1, // 设置边框宽度
        },
          legend: legendConfig,
          series:seriesConfig
      }
      myChart.value.setOption(option);
      myChart.value.on("click", (params) => {
        emit('dialogPieData',props.housingSupplyStatsData)
      });
  }
};
const updateChart = () => {
if (myChart.value) {
	myChart.value.dispose(); // 销毁旧图表实例
}
legendStyle = props.housingSupplyStatsData.legendStyle//图例
gridStyle = props.housingSupplyStatsData.gridStyle//网格
seriesData = props.housingSupplyStatsData.seriesData//serires数据
seriesStyle = props.housingSupplyStatsData.seriesStyle//serires配置 
getEchart();
};

watchEffect(() => {
updateChart();
});
const handleClose = () => {
	dialogVisible.value = false
	emit('closePieDialog',dialogVisible.value)
}

const tempDom = (params) => {
  let tempDom = ''
  let tb = params.data.value1 >= 0 ? 'up' : 'down'
  if(tb == 'up'){
     tempDom = `<span class="triangle"></span><span class="greenFont">${params.data.value1}%</span>同比上年`
  }else{
    tempDom = `<span class="triangleRed"></span><span class="redFont">${params.data.value1}%</span>同比上年`
  }
  
   return tempDom
}
onMounted(() => {
getEchart();
window.addEventListener("resize", () => {
	if (myChart.value) {
			myChart.value.dispose(); // 销毁旧图表实例
	}
	getEchart(); // 创建新的图表实例
});
});

onUnmounted(() => {
window.removeEventListener("resize", () => {
	if (myChart.value) {
			myChart.value.dispose(); // 在组件销毁时也需要销毁图表实例
	}
});
});
</script>

<style scoped lang="less">
.pie_box{
	width: 100%;
	height: 680px;
}
.echarts-background {
background-color: transparent !important;
}
:deep(.triangle){
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #2ecc71;
  display: inline-flex;
  align-items: center;
  margin-right: 3px;
  margin-bottom: 2px;
}
:deep(.triangleRed){
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid red;
  display: inline-flex;
  align-items: center;
  margin-right: 3px;
  margin-bottom: 2px;
  transform: rotateX(180deg);
}
:deep(.greenFont){
  color: #2ecc71;
}
:deep(.redFont){
  color: red;
}
</style>
